<template>
  <div class="import-container">
    <div class="app-container">
      <el-card shadow="always" :body-style="{ padding: '20px' }">
        <div slot="header">
          <el-button
            type="primary"
            icon="el-icon-arrow-left"
            size="mini"
            circle
            @click="$router.back()"
          ></el-button>
          <span>批量导入员工</span>
        </div>
        <!-- card body -->
        <!-- excel导入组件 => 读取excel中的员工数据
        用法总结
        父传子:
        :before-upload="beforeUpload"  校验文件
        :on-success="handleSuccess"   校验通过后，获取读取到的excel数据的
         -->
        <UploadExcel
          :before-upload="beforeUpload"
          :on-success="handleSuccess"
        />
      </el-card>
    </div>
  </div>
</template>

<script>
// 导入时间格式化的方法
import { formatExcelDate } from '@/utils/'
// 导入封装好的后台API，上传读取到的excel员工数据接口
import { importEmployees } from '@/api/empoyees.js'
export default {
  methods: {
    // 读取选择的excel文件之前会先执行这个校验函数
    // 用法: 校验通过返回true，校验失败返回false(不会执行handleSuccess函数)
    // 作用: 校验大小
    beforeUpload (file) {
      console.log('文件信息', file)
      // 小于1M 可以上传 => file.size 单位: 字节Byte   1M 1024KB 1024B
      // const isLt1M = file.size / 1024 / 1024 < 1

      // if (isLt1M) {
      //   return true
      // }

      // this.$message({
      //   message: 'Please do not upload files larger than 1m in size.',
      //   type: 'warning'
      // })
      // 必须返回true才会继续执行
      return true
    },
    // 校验通过后执行
    /**
     * res: 读取到的excel数据
     * 参数解构 res.header  res.results
     */
    async handleSuccess ({ header, results }) {
      // console.log(res)
      // console.log('读取到的excel数据', header, results)
      // console.table(results)
      // console.log('做完中英文转换后的数据', this.transformResults(results))
      // 参数为 包含员工信息 的数组
      await importEmployees(this.transformResults(results))
      this.$message.success('导入员工数据成功')
      // 返回员工列表
      this.$router.back()
    },
    // 转换读取员工数据中文key => 转换为和接口保持一致的英文的key
    /**
     * results 接口要转换的数据
     */
    transformResults (results) {
      // 中英对照表(映射关系)
      const zhToEn = {
        '入职日期': 'timeOfEntry',
        '聘用形式': 'formOfEmployment',
        '手机号': 'mobile',
        '姓名': 'username',
        '转正日期': 'correctionTime',
        '工号': 'workNumber',
        '部门': 'departmentName'
      }
      /**
       * 1. 准备一个新数组
       * 2. 循环外层数组=> 中文key 的员工数据 [{姓名: '张三'},{姓名: '李四'}] => forEach
       * 3. 里层循环的是中文key的员工数据 {姓名: '张三'} => for in
       *   获取中文key => 通过 zhToEn 关系 => zhToen[中文的key] 替换中文key为英文key => push到新数组
       * 4. 返回处理完的新数组
       * 问题说明: excel 读取时间不对 => excel 时间比正确时间多70年
       */
      const newArr = []
      results.forEach(item => {
        // item 是中文key的员工数据
        const newItem = {}
        for (const zhKey in item) {
          // 获取enKey英文属性
          const enKey = zhToEn[zhKey]
          // 处理excel读取到的时间 => timeOfEntry || correctionTime
          if (enKey === 'timeOfEntry' || enKey === 'correctionTime') {
            // 第二个参数可以指定分隔符
            newItem[enKey] = formatExcelDate(item[zhKey], '-')
          } else {
            // 放到新对象上并赋值
            newItem[enKey] = item[zhKey]
          }
        }
        // push 到新数组中
        newArr.push(newItem)
      })
      // 最后把新数组(处理完的数据)返回出去
      return newArr
    }
  }
}
</script>

<style lang="scss" scoped>
.el-button--mini.is-circle {
  margin-right: 15px;
}
</style>
